<template>
  <view class="page">
    <!-- 使用 z-paging 实现分页加载 -->
    <z-paging
      ref="paging"
      v-model="eventList"
      :fixed="true"
      safe-area-inset-bottom
      :default-page-size="20"
      :auto-show-back-to-top="true"
      :refresher-enabled="true"
      :loading-more-enabled="true"
      @query="queryList"
    >
      <!-- 顶部导航栏 + 日期选择器 -->
      <template #top>
        <view class="header-container">
          <!-- 导航栏 -->
          <view class="nav-bar" :style="{ paddingTop: statusBarPx + 'px' }">
            <view class="nav-content">
              <view class="nav-left" @click="goBack">
                <uv-icon name="arrow-left" size="20" color="#303133"></uv-icon>
                <text class="nav-back-text">返回</text>
              </view>
              <view class="nav-title">财经快讯</view>
              <view class="nav-right"></view>
            </view>
          </view>

          <!-- 月份选择器 -->
          <view class="date-selector" @click="openMonthPicker">
            <text class="selected-year-month">{{ selectedYearMonth }}</text>
            <uv-icon name="calendar" size="20" color="#ffffff"></uv-icon>
          </view>
        </view>
      </template>

      <!-- 时间轴事件列表 -->
      <view class="timeline-container">
        <!-- 按日期分组的事件 -->
        <view 
          v-for="(group, groupIdx) in groupedEvents" 
          :key="group.date"
          class="date-group"
        >
          <!-- 日期块（左侧蓝色方块） -->
          <view class="date-block">
            <view class="date-block-inner">
              <text class="date-month">{{ group.month }}月</text>
              <text class="date-day">{{ group.day }}</text>
            </view>
            <text class="date-weekday">{{ group.weekday }}</text>
          </view>

          <!-- 该日期下的事件列表 -->
          <view class="events-wrapper">
            <view 
              v-for="(event, eventIdx) in group.events" 
              :key="event.id"
              class="timeline-item"
            >
              <!-- 时间轴节点 -->
              <view class="timeline-dot"></view>
              <view 
                class="timeline-line" 
                v-if="eventIdx < group.events.length - 1"
              ></view>

              <!-- 事件内容 -->
              <view class="event-content">
                <!-- 时间 -->
                <view class="event-time">{{ event.timeOnly }}</view>

                <!-- 事件卡片 -->
                <view class="event-card">
                  <!-- 标题容器（包含首发标签和标题） -->
                  <view class="title-wrapper">
                    <!-- 首发标签图片（如果是高重要性） -->
                    <image 
                      v-if="event.importance >= 3" 
                      class="first-badge-img"
                      src="https://image.blockbeats.cn/v6/mob/fixed_pic/home-first.png"
                      mode="aspectFit"
                    />  
                    
                    <!-- 标题 -->
                    <text class="event-title">{{ event.title }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="groupedEvents.length === 0 && !isLoading" class="empty-state">
          <text class="empty-text">暂无财经事件</text>
        </view>
      </view>
    </z-paging>

    <!-- 月份选择器弹窗 -->
    <uv-picker
      ref="monthPicker"
      :columns="pickerColumns"
      :defaultIndex="pickerDefaultIndex"
      title="选择月份"
      keyName="label"
      :round="20"
      confirmColor="#00d4aa"
      @confirm="onMonthConfirm"
      @cancel="closeMonthPicker"
      @close="closeMonthPicker"
    ></uv-picker>
  </view>
</template>

<script>
import { getFinancialEvents } from '@/api/data'

export default {
  data() {
    const sys = uni.getSystemInfoSync()
    const statusBarPx = sys.statusBarHeight || 0

    // 初始化日期
    const today = new Date()
    const year = today.getFullYear()
    const month = today.getMonth() + 1

    // 生成年份列表（2020-2030）
    const yearColumn = []
    for (let i = 2020; i <= 2030; i++) {
      yearColumn.push({
        label: `${i}年`,
        value: i
      })
    }

    // 生成月份列表（1-12月）
    const monthColumn = []
    for (let i = 1; i <= 12; i++) {
      monthColumn.push({
        label: `${i}月`,
        value: i
      })
    }

    return {
      statusBarPx,
      eventList: [], // 事件列表
      allEvents: [], // 缓存所有事件数据（用于本地分页）
      isFirstLoad: true, // 是否首次加载
      isLoading: false, // 加载状态
      
      // 月份选择器相关
      selectedYear: year,
      selectedMonth: month,
      pickerColumns: [yearColumn, monthColumn], // 选择器列数据
      pickerDefaultIndex: [year - 2020, month - 1], // 默认选中的索引
    }
  },

  computed: {
    /**
     * 显示的年月字符串
     */
    selectedYearMonth() {
      return `${this.selectedYear}年${this.selectedMonth}月`
    },

    /**
     * 按日期分组的事件列表
     */
    groupedEvents() {
      if (!this.eventList || this.eventList.length === 0) {
        return []
      }

      // 按日期分组
      const groups = {}
      const weekTexts = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

      this.eventList.forEach(event => {
        const date = new Date(event.publishTimestamp)
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const dateKey = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`

        if (!groups[dateKey]) {
          groups[dateKey] = {
            date: dateKey,
            year: year,
            month: month,
            day: day,
            weekday: weekTexts[date.getDay()],
            events: []
          }
        }

        // 添加只包含时间的字段
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        
        groups[dateKey].events.push({
          ...event,
          timeOnly: `${hours}:${minutes}`,
          calendarName: event.title // 添加 calendarName 字段
        })
      })

      // 转换为数组并按日期排序
      const result = Object.values(groups).sort((a, b) => {
        return new Date(b.date) - new Date(a.date) // 降序排列，最新的在前
      })

      // 每个分组内的事件按时间排序
      result.forEach(group => {
        group.events.sort((a, b) => {
          return b.publishTimestamp - a.publishTimestamp // 降序排列
        })
      })

      return result
    }
  },

  methods: {
    /**
     * z-paging 查询数据方法（实现本地分页）
     * @param {Number} pageNo - 页码
     * @param {Number} pageSize - 每页数量
     */
    async queryList(pageNo, pageSize) {
      try {
        console.log('请求财经事件数据（本地分页）:', { pageNo, pageSize })
        
        this.isLoading = true

        // 下拉刷新时（pageNo === 1），清空缓存重新获取
        if (pageNo === 1 && !this.isFirstLoad) {
          console.log('下拉刷新，清空缓存')
          this.allEvents = []
          this.isFirstLoad = true
        }

        // 如果是首次加载或缓存为空，获取所有数据
        if (this.isFirstLoad) {
          // 计算选中月份的开始和结束时间戳
          const startDate = new Date(this.selectedYear, this.selectedMonth - 1, 1)
          const endDate = new Date(this.selectedYear, this.selectedMonth, 0, 23, 59, 59, 999)
          
          console.log('=== 财经事件请求参数 ===')
          console.log('选中年月:', `${this.selectedYear}年${this.selectedMonth}月`)
          console.log('开始时间:', startDate.toLocaleString('zh-CN'))
          console.log('结束时间:', endDate.toLocaleString('zh-CN'))
          console.log('开始时间戳:', startDate.getTime())
          console.log('结束时间戳:', endDate.getTime())
          
          const response = await getFinancialEvents({
            start_time: startDate.getTime(),
            end_time: endDate.getTime()
          })
          
          console.log('财经事件响应:', response)
          console.log('返回数据条数:', response.data?.length || 0)
          
          // 打印前3条数据的时间戳，用于调试
          if (response.data && response.data.length > 0) {
            console.log('=== 前3条数据时间戳检查 ===')
            response.data.slice(0, 3).forEach((item, idx) => {
              const itemDate = new Date(item.publishTimestamp)
              console.log(`数据${idx + 1}:`, item.calendarName)
              console.log(`  时间戳: ${item.publishTimestamp}`)
              console.log(`  日期: ${itemDate.toLocaleString('zh-CN')}`)
              console.log(`  月份: ${itemDate.getMonth() + 1}月`)
            })
          }

          // 获取所有数据（数据已统一格式化为驼峰格式）
          const events = response.data || []
          
          // 格式化所有数据并缓存
          this.allEvents = events.map((item, index) => {
            // 转换时间戳为日期时间字符串
            const publishDate = new Date(item.publishTimestamp)
            const year = publishDate.getFullYear()
            const month = String(publishDate.getMonth() + 1).padStart(2, '0')
            const day = String(publishDate.getDate()).padStart(2, '0')
            const hours = String(publishDate.getHours()).padStart(2, '0')
            const minutes = String(publishDate.getMinutes()).padStart(2, '0')

            // 生成唯一 ID：使用国家代码-时间戳-索引，确保唯一性
            const uniqueId = `${item.countryCode}-${item.publishTimestamp}-${index}`

            return {
              id: uniqueId,
              title: item.calendarName,
              country: item.countryName,
              countryCode: item.countryCode,
              flag: this.getCountryFlag(item.countryCode),
              time: `${year}-${month}-${day} ${hours}:${minutes}`,
              importance: item.importanceLevel || 1,
              hasExactTime: item.hasExactPublishTime === 1,
              publishTimestamp: item.publishTimestamp,
            }
          })

          console.log('缓存的所有数据:', this.allEvents.length, '条')
          this.isFirstLoad = false
        }

        // 本地分页：从缓存中获取当前页数据
        const startIndex = (pageNo - 1) * pageSize
        const endIndex = startIndex + pageSize
        const pageData = this.allEvents.slice(startIndex, endIndex)

        console.log(`第${pageNo}页数据:`, {
          startIndex,
          endIndex,
          pageDataLength: pageData.length,
          totalLength: this.allEvents.length
        })

        this.isLoading = false

        // 完成加载
        this.$refs.paging.complete(pageData)
      } catch (error) {
        console.error('加载财经事件失败:', error)

        this.isLoading = false

        // 加载失败
        this.$refs.paging.complete(false)

        uni.showToast({
          title: error.message || '加载失败，请重试',
          icon: 'none',
          duration: 2000,
        })
      }
    },

    /**
     * 将国家代码转换为旗帜 emoji
     * @param {String} countryCode - 国家代码（如 "USA", "GBR", "CHN"）
     * @returns {String} 旗帜 emoji
     */
    getCountryFlag(countryCode) {
      if (!countryCode) return '🌍'

      // 国家代码到旗帜 emoji 的映射
      const flagMap = {
        'USA': '🇺🇸',  'US': '🇺🇸',
        'GBR': '🇬🇧',  'GB': '🇬🇧',  'UK': '🇬🇧',
        'CHN': '🇨🇳',  'CN': '🇨🇳',
        'JPN': '🇯🇵',  'JP': '🇯🇵',
        'EUR': '🇪🇺',  'EU': '🇪🇺',
        'DEU': '🇩🇪',  'DE': '🇩🇪',  'GER': '🇩🇪',
        'FRA': '🇫🇷',  'FR': '🇫🇷',
        'CAN': '🇨🇦',  'CA': '🇨🇦',
        'AUS': '🇦🇺',  'AU': '🇦🇺',
        'CHE': '🇨🇭',  'CH': '🇨🇭',  'SWI': '🇨🇭',
        'NZL': '🇳🇿',  'NZ': '🇳🇿',
        'IND': '🇮🇳',  'IN': '🇮🇳',
        'KOR': '🇰🇷',  'KR': '🇰🇷',  'SK': '🇰🇷',
        'BRA': '🇧🇷',  'BR': '🇧🇷',
        'MEX': '🇲🇽',  'MX': '🇲🇽',
        'RUS': '🇷🇺',  'RU': '🇷🇺',
        'SGP': '🇸🇬',  'SG': '🇸🇬',
        'HKG': '🇭🇰',  'HK': '🇭🇰',
        'ITA': '🇮🇹',  'IT': '🇮🇹',
        'ESP': '🇪🇸',  'ES': '🇪🇸',
        'NLD': '🇳🇱',  'NL': '🇳🇱',
        'BEL': '🇧🇪',  'BE': '🇧🇪',
        'AUT': '🇦🇹',  'AT': '🇦🇹',
        'SWE': '🇸🇪',  'SE': '🇸🇪',
        'NOR': '🇳🇴',  'NO': '🇳🇴',
        'DNK': '🇩🇰',  'DK': '🇩🇰',
        'POL': '🇵🇱',  'PL': '🇵🇱',
        'TUR': '🇹🇷',  'TR': '🇹🇷',
        'ZAF': '🇿🇦',  'ZA': '🇿🇦',
        'SAU': '🇸🇦',  'SA': '🇸🇦',
        'ARE': '🇦🇪',  'AE': '🇦🇪',
        'MYS': '🇲🇾',  'MY': '🇲🇾',  'MAS': '🇲🇾',
        'THA': '🇹🇭',  'TH': '🇹🇭',
        'VNM': '🇻🇳',  'VN': '🇻🇳',
        'PHL': '🇵🇭',  'PH': '🇵🇭',
        'IDN': '🇮🇩',  'ID': '🇮🇩',
        'EGY': '🇪🇬',  'EG': '🇪🇬',
        'ARG': '🇦🇷',  'AR': '🇦🇷',
        'CHL': '🇨🇱',  'CL': '🇨🇱',
      }

      const code = countryCode.toUpperCase()
      return flagMap[code] || '🌍'
    },

    /**
     * 获取重要性文本描述
     * @param {Number} level - 重要性等级（1-3）
     * @returns {String} 重要性描述
     */
    getImportanceText(level) {
      const texts = {
        1: '一般',
        2: '重要',
        3: '非常重要'
      }
      return texts[level] || '一般'
    },

    /**
     * 打开月份选择器
     */
    openMonthPicker() {
      this.$nextTick(() => {
        if (this.$refs.monthPicker) {
          this.$refs.monthPicker.open()
        }
      })
    },

    /**
     * 关闭月份选择器
     */
    closeMonthPicker() {
      if (this.$refs.monthPicker) {
        this.$refs.monthPicker.close()
      }
    },

    /**
     * 月份选择器确认
     * @param {Object} e - 选择的结果对象
     * e.value: [{ label: '2025年', value: 2025 }, { label: '11月', value: 11 }]
     * e.indexs: [5, 10] (索引数组)
     */
    onMonthConfirm(e) {
      console.log('月份选择器确认:', e)
      
      if (e && e.value && e.value.length === 2) {
        // e.value 是选中的值数组 [年份对象, 月份对象]
        this.selectedYear = e.value[0].value
        this.selectedMonth = e.value[1].value
        
        // 更新默认索引，下次打开时显示当前选中的月份
        this.pickerDefaultIndex = e.indexs || [this.selectedYear - 2020, this.selectedMonth - 1]
        
        // 重新加载数据
        this.refreshData()
        
        uni.showToast({
          title: `已选择 ${this.selectedYear}年${this.selectedMonth}月`,
          icon: 'none',
          duration: 1500,
        })
      }
    },

    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack()
    },

    /**
     * 刷新数据（重新获取所有数据）
     */
    refreshData() {
      this.isFirstLoad = true
      this.allEvents = []
      if (this.$refs.paging) {
        this.$refs.paging.reload()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

/* 头部容器 */
.header-container {
  background: #ffffff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 导航栏 */
.nav-bar {
  position: relative;
  width: 100%;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 8rpx;
  cursor: pointer;
  
  &:active {
    opacity: 0.6;
  }
}

.nav-back-text {
  font-size: 28rpx;
  color: #303133;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32rpx;
  font-weight: 700;
  color: #303133;
}

.nav-right {
  width: 80rpx;
}

/* 日期选择器 */
.date-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
  margin: 0 24rpx 16rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 212, 170, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 212, 170, 0.3);
  }
}

.selected-year-month {
  font-size: 32rpx;
  font-weight: 700;
  color: #ffffff;
}

/* 时间轴容器 */
.timeline-container {
  padding: 24rpx 24rpx 40rpx;
}

/* 日期分组 */
.date-group {
  display: flex;
  margin-bottom: 48rpx;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }
}

/* 左侧日期块 */
.date-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  margin-right: 32rpx;
}

.date-block-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 212, 170, 0.25);
  margin-bottom: 8rpx;
}

.date-month {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin-bottom: 4rpx;
}

.date-day {
  font-size: 48rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.date-weekday {
  font-size: 24rpx;
  color: #909399;
  text-align: center;
}

/* 事件包装器 */
.events-wrapper {
  flex: 1;
  position: relative;
}

/* 时间轴项 */
.timeline-item {
  position: relative;
  padding-bottom: 40rpx;

  &:last-child {
    padding-bottom: 0;
  }
}

/* 时间轴圆点 */
.timeline-dot {
  position: absolute;
  left: -48rpx;
  top: 8rpx;
  width: 16rpx;
  height: 16rpx;
  background: #00d4aa;
  border: 4rpx solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2rpx 8rpx rgba(0, 212, 170, 0.3);
  z-index: 2;
}

/* 时间轴连线 */
.timeline-line {
  position: absolute;
  left: -40rpx;
  top: 24rpx;
  bottom: -40rpx;
  width: 2rpx;
  background: linear-gradient(180deg, #d4f4f0 0%, rgba(212, 244, 240, 0.3) 100%);
  z-index: 1;
}

/* 事件内容 */
.event-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

/* 事件时间 */
.event-time {
  font-size: 28rpx;
  font-weight: 600;
  color: #00d4aa;
  padding-left: 4rpx;
}

/* 事件卡片 */
.event-card {
  position: relative;
  padding: 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f3f8;
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
}

/* 标题容器 */
.title-wrapper {
}

/* 首发标签图片 */
.first-badge-img {
  flex-shrink: 0;
  width: 72rpx;
  height: 36rpx;
  margin-right: 8rpx;

}

/* 事件标题 */
.event-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #303133;
  line-height: 1.5;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #c0c4cc;
}
</style>

